<p style="margin-bottom: 0px">&nbsp;</p>
<nz-spin [nzSpinning]="loading">
    <nz-card [nzBordered]="false">
        <form nz-form [nzLayout]="'inline'"> 
            <div nz-row>
                <div nz-col nzSpan="16" nzOffset="8">              
                    <nz-form-item>
                        <nz-form-control>
                            <nz-input-group nzPrefixIcon="anticon anticon-barcode">
                                <input autocomplete="off" [(ngModel)]="code" nz-input placeholder="Enter Security code" style="width: 250px;" nzSize="large" name="acode">                                 
                            </nz-input-group>                             
                        </nz-form-control>
                        <button nz-button nzType="primary" type="button" class="ml-md" (click)="search()"><i class="anticon anticon-search"></i>Search</button>
                    </nz-form-item>
                </div>
            </div>   
            <div nz-row *ngIf="data && data.msg">
                <div nz-col nzSpan="16" nzOffset="8">
                    <small class="text-error">
                        {{data.msg}}
                    </small> 
                </div>
            </div>     
        </form> 
    </nz-card>
    <nz-card  [nzBordered]="false" [nzLoading]="loading">
        <div *ngIf="data">
            <div nz-row class="mt-md text-center text-md" >
                <div nz-col nzSpan="6">
                    Barcode：{{data.barcode}}
                </div>
                <div nz-col nzSpan="6">
                    Brand：{{(data.product ? data.product.brand : data.list[0].BRAND) | brandEnPipe | uppercase}}
                </div>
                <div nz-col nzSpan="6">
                    Style：{{data.product ? data.product.style + "---" +data.product.colorCd : data.list[0].STYLE}}
                </div>
                <div nz-col nzSpan="6">
                    Status：{{data.recyclemsg}}
                </div>
            </div>      
            <nz-divider></nz-divider>    
            <div nz-row class="mt-md">
                <div nz-col nzSpan="8" nzOffset="8">       
                    <nz-timeline>
                        <nz-timeline-item *ngFor="let row of data.list" nzColor="#{{row.COL_CODE}}">
                            <p>{{row.LOGIST_DATE}}</p>
                            <p>{{row.PEIGOODL_NO}} {{row.LNO}}</p>
                            <p>{{row.SOCOMPANY}} -> {{row.MDCOMPANY}}</p> 
                        </nz-timeline-item>                        
                    </nz-timeline>                            
                </div>
            </div> 
        </div>      
    </nz-card>
</nz-spin>